<template>
	<view class="order">
		<view class="top headline">
			<uni-icons type="arrowleft" size="24" class="left" color="#999" @click="go_my()" />
			订单列表
			<view class="find" @click="go_search()"><image src="/static/img/find_2.png" /></view>
		</view>
		<view class="list">
			<view :class="{ active: list_active == 0 }" @click="go_active(0)">全部</view>
			<view :class="{ active: list_active == 1 }" @click="go_active(1)">待付款</view>
			<view :class="{ active: list_active == 3 }" @click="go_active(3)">待发货</view>
			<view :class="{ active: list_active == 4 }" @click="go_active(4)">待收货</view>
			<view :class="{ active: list_active == 5 }" @click="go_active(5)">已完成</view>
		</view>
		<ul v-show="initData[0]">
			<li class="order_list">
				<view v-for="item in initData" :key="item.value">
					<view class="" @click="go_commoditydetails(item.orderId)">
						<view class="number">
							订单编号：{{ item.orderSn }}
							<text class="right">{{ item.frontOrderStatus.desp }}</text>
						</view>
						<view class="msg">
							<image :src="item.image" class="imgthumb" :lazy-load="true" mode="aspectFill" />
							<view class="text">
								<view class="title">{{ item.goodsName }}</view>
								<view class="trait">颜色：{{ item.color }}</view>
								<view class="trait">尺寸：{{ item.size }}</view>

								<text class="right">×1</text>

								<view class="price">￥{{ item.orderPrice }}</view>
							</view>
						</view>
					</view>

					<view class="total">
						<text class="quantity">共1件</text>
						合计：
						<text class="price">￥{{ item.actualPrice }}</text>
					</view>
					<view class="operation">
						<text @click="go_eid(item)" v-if="item.frontOrderStatus.value == 1">修改商品</text>
						<!-- <text v-if="item.frontOrderStatus.value == 1">修改商品</text> -->
						<text @click="go_del(item)" v-if="item.frontOrderStatus.value != 4 && item.frontOrderStatus.value != 3">删除订单</text>
						<text @click="go_pay(item)" v-if="item.frontOrderStatus.value == 1">去付款</text>
						<!-- <text>完成</text> -->
						<text v-if="item.frontOrderStatus.value == 4" @click="confirm(item.orderId)">确认收货</text>
						<text v-if="item.frontOrderStatus.value == 4" @click="changepro(item, 2)">申请换货</text>
						<text v-if="item.frontOrderStatus.value == 4" @click="changepro(item, 1)">申请退款</text>

						<!--根据终端进行是否上传买家秀功能-->
						<text v-if="item.frontOrderStatus.value == 5&&issee" @click="uploadshow(item)">上传买家秀</text>
					</view>
				</view>
			</li>
		</ul>
		<view class="pagination" v-show="initData[0]">
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
		<view class="gotop"></view>
		<view v-show="!initData[0]" class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		<transition name="fade"><view class="ceng" v-show="is_preposition" @click="ceng"></view></transition>
		<view class="preposition" v-show="is_preposition">
			<view class="intro" v-if="goodDetails.skus">
				<view class="img"><image :src="productImg" mode="aspectFill" /></view>
				<view class="text">
					<view class="name">{{ goodDetails.goodsName }}</view>
					<view class="price">￥{{ disPrice }}</view>
					<view class="control">
						<text>-</text>
						<text>1</text>
						<text>+</text>
					</view>
				</view>
				<view class="close" @click="ceng"><uni-icons type="closeempty" size="30rpx" color="#9b9b9b" class="uni-icons" /></view>
			</view>
			<view class="parameter" v-if="goodDetails.specs">
				<view class="name">
					选择颜色/尺码
					<i class="cubeic-arrow right"></i>
				</view>

				<view class="ul" v-if="shop_details[0]">
					<view class="flex">
						<view class="li" v-for="(item, index1) in shop_details[0].sublevel" :key="index1" :class="{ active: index1 == indexs }" @click="checkeds(item, index1)">
							{{ item }}
						</view>
					</view>
					<view class="flex">
						<view class="li" v-for="(item, index) in shop_details[0].size" :key="index" :class="{ active: index == idx }" @click="checkcolor(item, index)">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
			<view class="button" @click="sub()">确 定</view>
		</view>
	</view>
</template>
<script>
import { uniIcons } from '@dcloudio/uni-ui';
import list from '../../../servers/order/list.js';
import goodDetails from '../../../servers/commodity/particulars.js';
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			msg_list: [
				{
					id: 5,
					checked: false
				}
			],
			list_active: 0,
			is_preposition: 0,
			type: '', //默认展示那个标签页
			queryType: '', //查询类型
			initData: [], //初始化数据
			goodDetails: [], //修改商品数据
			checked: '',
			checked1: '',
			idx: 0,
			indexs: 0,
			shop_details: [],
			is_go_top: false,
			disPrice:'',
			is_all: false,
			paging: {
				page: 1,
				total: 100
			},
			issee:true,
			productImg:''
		};
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	onLoad(option) {
		this.list_active=option.shoporderlist
	},
	// mounted() {
	// 	var _this = this;
	// 	this.list_active = uni.getStorageSync('shoporderlist') || this.$route.query.shoporderlist;
	// 	if (!this.list_active) {
	// 		//待付款
	// 		this.list_active = 0;
	// 	}
	// 	this.getDate();
	// },
	onShow() {
		// this.list_active = uni.getStorageSync('shoporderlist') || this.$route.query.shoporderlist;
		if (!this.list_active) {
			//待付款
			this.list_active = 0;
		}
		this.getDate();
		this.check();
	},
	methods: {
		getDate() {
			var obj = {
				frontOrderStatus: this.list_active,
				currentPage: this.paging.page,
				pageSize: 10
			};
			list.initData(obj)
				.then(res => {
					console.log(res.data.records);

					this.paging.total = Math.ceil(res.data.total / res.data.size);
					this.initData = [];
					this.initData = res.data.records.map(v => {
						if (v.orderGoods[0]) {
							v.image = this.imgCDNUrl + v.orderGoods[0].goodsImg;
							var sku = [],
								size = '',
								color = '';
							if (v.orderGoods[0].skuDesp) {
								sku = v.orderGoods[0].skuDesp.split(',');
								size = sku[1].split(',')[0].split(':')[1];
								color = sku[0].split(',')[0].split(':')[1];
							}

							v.goodsName = v.orderGoods[0].goodsName;
							v.size = size;
							v.color = color;
						}
						return v;
					});
				})
				.catch(err => {
					console.log(err);
					console.log(new Error('请检查网络后重试'));
				});
		},
		check(){
			list.checkBuyerShow()
				.then(res => {
					console.log(res);
					if(res.data==1){
						this.issee=true
					}else{
						this.issee=false
					}
					
				})
				.catch(err => {
					
					console.log(new Error('请检查网络后重试'));
				});
		},
		changepro(item, num) {
			uni.navigateTo({
				url: './after?item=' + JSON.stringify(item) + '&num=' + num
			});
		},
		uploadshow(item){
			uni.navigateTo({
				url: './showlist?id=' + item.orderId+'&goodsId='+item.orderGoods[0].goodsId
			});
		},
		confirm(id){
			uni.showLoading({
				title: '提交中',
				mask: true
			});
			list.confirm(id)
				.then(res => {
					uni.hideLoading();
					this.getDate();
				})
				.catch(err => {			
					console.log(new Error('请检查网络后重试'));
				});
		},
		go_url(url) {
			uni.navigateTo({
				url: url
			});
		},
		go_my() {
			uni.switchTab({
				url: '/pages/shop/my'
			});
		},
		go_search() {
			uni.navigateTo({
				url: '/pages/shop/order/find'
			});
		},
		go_active(e) {
			console.log(e);
			this.list_active = e;
			this.paging.page = 1;
			var obj = {
				frontOrderStatus: e
			};
			this.getDate();
		},
		go_del(e) {
			var flag = e.frontOrderStatus.value;
			var id = e.orderId;
			if (flag == 3 || flag == 4) {
				//弹出不让删除
			} else if(id){				
				//请求删除接口
				var _this=this;
				uni.showModal({
				    title: '提示',
				    content: '是否删除该订单',
				    success: function (res) {
				        if (res.confirm) {
				            list.del(id).then(res => {
				            	uni.showToast({
				            		title: '删除成功',
				            		duration: 2000
				            	});
				            	_this.getDate();
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			}
		},
		go_pay(e) {
			var da = {
				id: e.orderId,
				price: e.orderPrice
			};
			uni.setStorage({
				key: 'order',
				data: da,
				success: function() {
					uni.navigateTo({
						url: '/pages/shop/order/pay'
					});
				}
			});
		},
		go_eid(e) {
			var goodsId = e.orderGoods[0].goodsId;
			goodDetails
				.goodDetails(goodsId)
				.then(res => {
					this.goodDetails = res.data;
					this.goodImag = this.goodDetails.imgs.map(v => {
						v = this.imgCDNUrl + v;
						return v;
					});
					if (this.goodDetails.skus[0].productImg) {
						this.productImg = this.imgCDNUrl + this.goodDetails.skus[0].productImg;
					} else {
						this.productImg = this.goodImag[0];
					}
					this.disPrice=this.goodDetails.skus[0].marketPrice
					uni.hideLoading();
					this.screen();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		ceng() {
			this.is_preposition = 0;
			this.is_share = false;
		},
		screen() {
			var classify = [];
			var it1 = [],
				it2 = [];
			var da1 = this.goodDetails.skus;
			var da10 = [];
			for (var i = 0; i < da1.length; i++) {
				var da2 = da1[i].productSkuDesp;
				var da3 = da2.split(',');

				it1.push(da3[0].split(':')[1]);
				it2.push(da3[1].split(':')[1]);

				for (var j = 0; j < it1.length; j++) {
					if (da10.indexOf(it1[j]) === -1) {
						da10.push(it1[j]);
					}
				}
				for (var k = 0; k < it2.length; k++) {
					if (classify.indexOf(it2[k]) === -1) {
						classify.push(it2[k]);
					}
				}
			}
			this.shop_details.push({
				size: classify,
				sublevel: da10
			});
			this.checked1 = this.shop_details[0].size[0];
			this.checked = this.shop_details[0].sublevel[0];
			this.indexs = 0;
			this.idx = 0;
			// this.checked = da10.map(v => {
			// 	return v.sublevel[0];
			// });
			this.is_preposition = true;
		},
		// 选择尺寸
		checkeds(e, ind) {
			this.indexs = ind;
			this.checked = e;
			this.goodDetails.skus.map(v => {
				if (v.productSkuDesp.split(',')[0].split(':')[1] == this.checked) {
					this.productImg = this.imgCDNUrl + v.productImg;
					this.disPrice=v.marketPrice
				}
			});
		},
		// 选择颜色
		checkcolor(e, ind) {
			this.idx = ind;
			this.checked1 = e;
			this.goodDetails.skus.map(v=>{
				if(v.productSkuDesp.split(',')[1].split(':')[1] ==this.checked1 ){
					
					this.disPrice=v.marketPrice
				}
			})
		},
		go_commoditydetails(e) {
			uni.setStorage({
				key: 'commoditydetails',
				data: e,
				success: function() {
					uni.navigateTo({
						url: '/pages/shop/order/commoditydetails'
					});
				}
			});
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.getDate();
			}
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.getDate();
			}
		},
		sub() {
			uni.showToast({
				title: '开发中',
				duration: 2000,
				icon: 'none'
			});
			// uni.showToast({
			//     title: '修改成功',
			//     duration: 2000
			// });
		}
	}
};
</script>
<style lang="less" scoped>
.order {
	min-height: 100%;
	background: #fff;

	.headline {
		top: var(--status-bar-height);

		.find {
			position: absolute;
			right: 0rpx;
			top: 7px;
			padding: 0 10px;

			image {
				width: 16px;
				height: 16px;
			}
		}
	}

	.list {
		display: flex;
		justify-content: space-around;
		margin-top: 22px;
		border-bottom: 1rpx solid #e1e1e1;

		/*no*/
		view {
			position: relative;
			text-align: center;
			line-height: 89rpx;
			font-size: 16px;
		}

		view.active {
			color: #bd3c8c;
		}

		view.active::after {
			position: absolute;
			content: '';
			bottom: 21rpx;
			left: 50%;
			width: 49rpx;
			height: 3rpx;
			background: #bd3c8c;
			transform: translate(-50%, 0);
		}
	}

	ul {
		padding: 20rpx;
		font-size: 26rpx;

		li {
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
			border-radius: 10rpx;

			.number {
				padding: 0 20rpx;
				border-bottom: 1rpx solid #e1e1e1;
				/*no*/
				font-size: 28rpx;
				line-height: 92rpx;

				.right {
					font-size: 26rpx;
					color: #bd3c8c;
				}
			}

			.msg {
				padding: 20rpx;
				display: flex;

				.imgthumb {
					width: 218rpx;
					height: 218rpx;
					border-radius: 10rpx;
					// height: fit-content;
				}

				.text {
					flex: 1;
					margin-left: 32rpx;

					.title {
						line-height: 44rpx;
						margin-bottom: 16rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.trait {
						color: #999;
						line-height: 38rpx;

						.right {
							color: #000;
						}
					}

					.price {
						line-height: 44rpx;
					}
				}
			}

			.total {
				text-align: right;
				line-height: 40rpx;
				padding: 0 20rpx;

				.quantity {
					color: #999;
					margin-right: 20rpx;
				}

				.price {
					font-size: 30rpx;
				}
			}

			.operation {
				text-align: right;
				padding: 46rpx 0;

				text {
					display: inline-block;
					text-align: center;
					width: 180rpx;
					line-height: 64rpx;
					border: 1px solid #e1e1e1;
					/*no*/
					border-radius: 32rpx;
					margin: 0 20rpx 0 35rpx;
					box-sizing: border-box;
				}
			}
		}
	}
	.preposition {
		position: fixed;
		bottom: 0px;
		width: 100%;
		background: #fff;
		z-index: 100;

		.intro {
			position: relative;
			display: flex;
			padding: 49rpx 20rpx;

			.img {
				margin-right: 30rpx;

				image {
					width: 211rpx;
					height: 211rpx;
				}
			}

			.text {
				padding-right: 65rpx;

				.name {
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.price {
					position: absolute;
					bottom: 49rpx;
					color: #bd3c8c;
					font-size: 36rpx;
				}

				.control {
					position: absolute;
					bottom: 40rpx;
					right: 20rpx;
					width: 200rpx;
					border: 1px solid #a0a0a0;
					/*no*/
					color: #d0d0d0;
					display: flex;
					text-align: center;
					line-height: 58rpx;
					border-radius: 30rpx;
					font-size: 32rpx;

					text {
						flex: 1;
					}

					text:nth-child(2) {
						color: #333;
						border-left: 1rpx solid #9b9b9b;
						border-right: 1rpx solid #9b9b9b;
					}
				}
			}

			.close {
				position: absolute;
				top: 40rpx;
				right: 20rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 1px solid #9b9b9b;
				/*no*/
				text-align: center;
				color: #9b9b9b;
				line-height: 40rpx;

				.uni-icons {
					position: absolute;
					left: 0;
					top: 0;
					font-size: 40rpx;
				}
			}
		}
		.parameter {
			padding: 0 20rpx;

			.ul {
				margin-bottom: 10rpx;
				margin-top: 20rpx;
				.p {
					font-size: 28rpx;
					line-height: 57rpx;
				}

				.li {
					display: inline-block;
					border-radius: 6rpx;
					padding: 19rpx 24rpx;
					border: 1px solid #efefef;
					/*no*/
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					font-size: 30rpx;
				}

				.li.active {
					background: #bd3c8c;
					color: #fff;
					border-color: #bd3c8c;
				}
			}

			.input {
				.inp {
					width: 100%;
					border: 1px solid #efefef;
					line-height: 80rpx;
					height: 80rpx;
					padding: 20rpx;
					margin: 20rpx 0;
					box-sizing: border-box;
					border-radius: 6rpx;
					font-size: 28rpx;
				}
			}
		}
		.button {
			margin: 80rpx 20rpx 20rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 45rpx;
		}
	}
}
</style>
